<template>
    <el-dialog v-model="dialogTableVisible" :title="isAdd ? '新增学生' : '修改信息'" width="800" @close="resetForm">
        <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" scroll-to-error label-width="auto"
            style="max-width: 600px">
            <el-form-item label="名字" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address" />
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="ruleForm.phone" />
            </el-form-item>
            <el-form-item label="身份证" prop="IDCard">
                <el-input v-model="ruleForm.IDCard" />
            </el-form-item>
            <el-form-item label="是否独生" prop="onlyChild">
                <el-radio-group v-model="ruleForm.onlyChild">
                    <el-radio value="1">独生子女</el-radio>
                    <el-radio value="0">非独生</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否接种" prop="vaccine">
                <el-radio-group v-model="ruleForm.vaccine">
                    <el-radio value="0">未接种</el-radio>
                    <el-radio value="1">已接种</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="户口所在地" prop="huKou">
                <el-select v-model="ruleForm.huKou" placeholder="户口所在地">
                    <el-option label="农村户口" value="1" />
                    <el-option label="城市户口" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { useMainStore } from '../store';
import { reactive, ref, defineExpose } from 'vue'

const mainStore = useMainStore()//创建pinia对象

/**页面操作 */
let isAdd = ref(true)//操作内容参数
/**页面显示参数 */
let dialogTableVisible = ref(false)//表单显示参数
let open = (val) => {//dialog页面显示函数
    if (val) {
        isAdd.value = false
        // console.log('yemain', val);
        ruleForm.value = Object.assign({}, val)
    }
    dialogTableVisible.value = true
}
defineExpose({ open, })//暴露函数，使得函数能够由父级组件访问

/** 
 * 表单数据
*/
const ruleForm = ref({//初始化表单数据
    vaccine: "0",
    onlyChild: '1',
})
const rules = reactive({//表单数据提交的校验格式字典
    name: [
        { required: true, message: '请输入学生名称', trigger: 'blur' },
    ],
    age: [
        { required: true, message: '请输入学生年龄', trigger: 'blur' },
        // { min: 1, max: 2, message: '请输入正确年龄', trigger: 'blur' }
    ],
    address: [
        { required: true, message: '请输入地址', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确格式', trigger: 'blur' },
    ],
    IDCard: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        { min: 18, max: 18, message: '请输入正确格式', trigger: 'blur' },
    ],
    onlyChild: [
        { type: 'string', message: '请至少选择一个子女类型', trigger: 'change' }
    ],
    vaccine: [
        { message: '请选择是否接种疫苗', trigger: 'change' }
    ],
    huKou: [
        { required: true, message: '至少选择一种户口类型', trigger: 'blur' },
    ]
})
const ruleFormRef = ref()//表单校验函数回调参数存储位置
const submitForm = async (ruleFormRef) => {//提交表单数据函数
    if (!ruleFormRef) return
    await ruleFormRef.validate((valid, fields) => {
        if (valid) {
            // console.log('数据查看', ruleForm, ruleFormRef);
            if (isAdd.value) {
                ruleForm.value.id = Math.random() + ''
                mainStore.addTable(ruleForm.value)
            } else {
                // console.log('修改数据', ruleForm.value);
                mainStore.updataTab(ruleForm.value)
            }
            dialogTableVisible.value = false
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**关闭dialog页面时回调控制本组件的存在 */
const emits = defineEmits(['close'])//定义可触发的父组件事件（close）
const resetForm = () => {//取消控件的调用函数
    dialogTableVisible = false
    emits('close')
}
</script>

<style scoped></style>